<template>
    <div class="studyCenter">
        <Card class="studyDetail">
            <p slot="title">学习设置</p>
            <Button v-if="role < 3" slot="extra" icon="md-brush" type="warning" style="width:80px" @click="changePage">编辑</Button>
            <table class="studyTable">
                <thead>
                    <th>
                        学习名称：<b> {{studyDetail.active_name }} </b>
                    </th>
                    <th>
                        学习标题：<b> {{studyDetail.active_title }} </b>
                    </th>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            学习对象：<b> {{studyDetail.active_object }} </b>
                        </td>
                        <td>
                            学习举办单位：<b> {{studyDetail.active_unit }} </b>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            学习开始时间：<b> {{studyDetail.start_time }} </b>
                        </td>
                        <td>
                            学习结束时间：<b> {{studyDetail.end_time }} </b>
                        </td>
                    </tr>
                </tbody>
            </table>
        </Card>

        <!-- <Card class="studyTotal">
            <p slot="title">学习统计</p>
            <div class="stydyBox">
                <div class="studyInfo">
                    <h4>参与总人数</h4>
                    <p> {{studyTotal.total_user_num }} </p>

                </div>
                <div class="studyInfo">
                    <h4>答题总次数</h4>
                    <p>{{studyTotal.total_clc_num }} </p>
                </div>
            </div>
        </Card> -->

        <Card class="styduAll">
            <p slot="title">学习统计</p>
            <!-- search start -->
            <div class="search">
                <Form :model="search" class="search_box" inline label-position="right">
                    <FormItem label="部门：">
                        <Select v-model="search.department" size="small" style="width:150px">
                            <Option value="全部">全部</Option>
                            <Option v-for="item in dem" :value="item" :key="item">{{ item }}</Option>
                        </Select>
                    </FormItem>

                    <FormItem label="姓名：">
                        <Input v-model="search.username"></Input>
                    </FormItem>

                    <FormItem label="时间：">
                        <DatePicker style="width:300px" type="datetimerange" placeholder="Select date and time" @on-change="changeTime($event)"></DatePicker>
                    </FormItem>

                    <FormItem>
                        <Button icon="md-search" type="primary" @click="searchList">搜索</Button>
                        <Button v-if="role < 3" style="margin-left:10px" icon="ios-download-outline" type="success" @click="exportExcel">导出Excel</Button>
                    </FormItem>
                </Form>

            </div> <!-- end search -->

            <Table ref="table" :loading="loading" stripe :columns="columns1" :data="data1"></Table>
            <Page :total="total" :current="search.page" show-sizer show-total :page-size="search.rows" @on-page-size-change="getListByPageSize" @on-change="getListByPageNum"> </Page>
        </Card>

    </div>
</template>

<script>
    import axios from '@/libs/api.request'
    import {
        exportExcel
    } from '@/api/data'
    import {
        mapGetters
    } from 'vuex'
    export default {
        name: 'question-set',
        data() {
            return {
                loading: false,

                // 搜索对象
                search: {
                    start_time: '',
                    end_time: '',
                    department: '全部',
                    username: '',
                    page: 1,
                    rows: 10
                },
                // 数据总条数
                total: 0,

                studyDetail: {},
                studyTotal: {
                    total_clc_num: '',
                    total_user_num: ''
                },

                columns1: [{
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '部门',
                        align: 'center',
                        key: 'department'
                    },
                    {
                        title: '答题人',
                        align: 'center',
                        key: 'username'
                    },

                    {
                        title: '答题次数',
                        align: 'center',
                        key: 'total_num'
                    },
                    {
                        title: '答对题数',
                        align: 'center',
                        key: 'right_num'
                    },
                    {
                        title: '答错题数',
                        align: 'center',
                        key: 'wrong_num',
                    },

                ],
                data1: []

            }
        },
        methods: {
            ...mapGetters(['getRole', 'getDem']),

            // 获取学习列表
            getStudyList() {
                axios.ajax_post('admin-class_learn-ajax_get_cl_overview', {}).then(res => {
                    if (res.data.code === 1) {
                        // this.$Notice.success({
                        //     title: res.data.msg,s
                        //     duration: 3
                        // })
                        this.studyDetail = res.data.data.detail
                        this.studyTotal.total_clc_num = res.data.data.total_clc_num
                        this.studyTotal.total_user_num = res.data.data.total_user_num

                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })

            },

            changePage() {
                this.$_changePage('study-detail', '学习设置', {})
            },

            // 获取答题统计列表
            getStudyAllList() {
                this.loading = true
                let {
                    ...data
                } = this.search

                axios.ajax_post('admin-class_learn-ajax_get_cl_total', data).then(res => {
                    this.loading = false
                    if (res.data.code === 1) {
                        this.data1 = res.data.data.list
                        this.total = res.data.data.total_num

                        if (this.data1.length < 1 && this.total > 0) {
                            this.search.page = Math.ceil(this.total / this.search.rows)
                            this.getStudyAllList()
                        }

                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })

            },

            // 搜索
            searchList() {
                this.search.page = 1
                this.search.rows = 10
                this.getStudyAllList()
            },

            // 导出
            exportExcel() {
                exportExcel('admin-class_learn-export_cl_total', this.search)
            },


            // 格式化时间
            changeTime(value) {
                this.search.start_time = value[0]
                this.search.end_time = value[1]
            },

            getListByPageSize(rows) {
                this.search.rows = rows
                this.getStudyAllList()
            },

            getListByPageNum(page) {
                this.search.page = page
                this.getStudyAllList()
            },
        },
        computed: {
            role() {
                return this.getRole()
            },
            dem() {
                return this.getDem()
            }
        },
        created() {
            this.getStudyList()
            this.getStudyAllList()
        }
    }
</script>

<style lang='less' scoped>
    .studyCenter {
        background-color: #f2f2f2;
        padding: 50px;
        display: flex;
        justify-content: flex-start;
        flex-flow: wrap;

        .studyDetail {
            width: 900px;
            margin-right: 50px;
            margin-bottom: 50px;

            .studyTable {
                width: 100%;
                border-width: 1px;
                border-color: #666;
                border-collapse: collapse;


                th {
                    border: 1px solid #ccc;
                    line-height: 50px;
                    background-color: #f2f2f2;

                }

                td {
                    border: 1px solid #ccc;
                    line-height: 50px;
                    padding: 10px;
                }
            }
        }

        .styduAll {
            width: 100%;

            .search {
                .search_box {
                    display: flex;
                    flex-wrap: wrap;

                    .ivu-form-item {
                        margin-right: 12px;
                        display: flex;
                        justify-content: flex-start;
                        margin-bottom: 20px;
                    }
                }
            }
        }

        .studyTotal {
            width: 900px;
            padding: 0 10px;
            margin-bottom: 50px;

            .stydyBox {
                margin-top: 30px;
                width: 100%;
                height: 120px;
                background-color: #f2f2f2;
                display: flex;
                justify-content: flex-start;
                padding: 40px;

                .studyInfo {
                    text-align: center;
                    width: 50%;

                    &:first-child {
                        border-right: 1px dashed #999;
                    }
                }


            }
        }
    }
</style>